<template>
	<div class="system-socialuser-container">
		<el-card shadow="hover">
			<el-button type="primary" class="ml10" icon="el-icon-document-add" @click="onShowQRCode()">绑定</el-button>
			<el-table ref="tableSocialUserRef" :data="tableData.data" @selection-change="onTableSelectionChange" style="width: 100%" row-key="id">
				<!-- <el-table-column type="selection" align="cneter" width="50" show-overflow-tooltip></el-table-column> -->
				<el-table-column type="index" align="cneter" width="50" show-overflow-tooltip></el-table-column>
				<el-table-column label="账号身份" prop="userMode" width="80" show-overflow-tooltip>
					<template #default="scope">
						<el-image style="width: 30px; height: 30px" :src="`/images/login/${scope.row.userMode.toLowerCase()}.png`">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column label="头像" width="80" show-overflow-tooltip>
					<template #default="scope">
						<el-image style="width: 30px; height: 30px"
							v-if="scope.row.avatar"
							:src="scope.row.avatar"
							:preview-src-list="[scope.row.avatar]">
						</el-image>
						<el-image style="width: 30px; height: 30px"
							v-else
							src="/images/profile.png" 
							preview-src-list="['/images/profile.png']">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column label="用户名称" prop="userName" min-width="100" show-overflow-tooltip></el-table-column>
				<el-table-column label="统一标识" prop="unionId" min-width="150" show-overflow-tooltip></el-table-column>
				<el-table-column label="唯一标识" prop="openId" min-width="150" show-overflow-tooltip></el-table-column>
				<el-table-column label="用户状态" show-overflow-tooltip width="100" align="center">
					<template #default="scope">
						<span v-if="scope.row.status == '0'" class="color-primary">正常</span>
						<span v-else-if="scope.row.status == '1'" class="color-info">停用</span>
						<span v-else class="color-danger">删除</span>
					</template>
				</el-table-column>
				<el-table-column label="绑定时间" prop="createTime" width="180" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" show-overflow-tooltip width="80">
					<template #default="scope">
						<el-button type="primary" link :disabled="scope.row.status == '1'" @click="onTabelRowFree(scope.row)">解绑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onPageSizeChange"
				@current-change="onPageCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30, 40, 50, 60]"
				v-model:current-page="search.pageNum"
				background
				v-model:page-size="search.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableData.total"
			>
			</el-pagination>
		</el-card>
		<BindSocialUser ref="bindSocialUserRef" @submit="onTableSearch"/>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import BindSocialUser from '/@/views/personal/social/bind.vue';
import { formatDate, getDateRangeShortcuts } from '/@/utils/formatTime';
import { getSocialUserList, freeSocialUser } from '/@/api/personal/index';
export default {
	name: 'socialuser',
	components: { BindSocialUser },
	setup() {
		const bindSocialUserRef = ref();
		const tableSocialUserRef = ref();
		const addSocialUserRef = ref();
		const editSocialUserRef = ref();
		const state = reactive({
			search:{
				userName: '',
				startTime: '',
				endTime: '',
				orderBy: 'createTime',
				isAsc: 'desc',
				pageNum: 1,
				pageSize: 10
			},
			dateData: {
				value: [],
				shortcuts: getDateRangeShortcuts()
			},
			tableData: {
				selections: [],//选中的行数据
				data: [],
				total: 0,
				loading: false
			}
		});

		const loadTableData = (params) => {
			getSocialUserList(Object.assign(state.search, params)).then((res) => {
				if(res.code == 0){
					state.tableData.data = res.data;
					state.tableData.total = res.total;
					tableSocialUserRef.value.clearSelection();
				}
			});
		}

		//查询
		const onTableSearch = () => {
			if(state.dateData.value.length == 2){
				state.search.startTime = formatDate(state.dateData.value[0], 'yyyy-MM-dd') + ' 00:00:00';
				state.search.endTime = formatDate(state.dateData.value[1], 'yyyy-MM-dd') + ' 23:59:59';
			}
			loadTableData(state.search);
		}
		//重置
		const onResetSearch = () => {
			state.dateData.value = [];
			state.search.userName = '';
			state.search.startTime = '';
			state.search.endTime = '';
			state.search.pageNum = 1;
			state.search.pageSize = 10;
			loadTableData(state.search);
		}
		// 监听表格选中行
		const onTableSelectionChange = (selections) =>{
			state.tableData.selections = selections;
		};
		// 每页显示数据大小改变
		const onPageSizeChange = (val: number) => {
			state.search.pageSize = val;
			loadTableData(state.search);
		};
		// 页码改变
		const onPageCurrentChange = (val: number) => {
			state.search.pageNum = val;
			loadTableData(state.search);
		};
		// 打开新增职级弹窗
		const onOpenAddSocialUser = (row: object) => {
			addSocialUserRef.value.openDialog(row);
		};
		// 打开编辑职级弹窗
		const onOpenEditSocialUser = (row: object) => {
			row = row || state.tableData.selections[0];
			editSocialUserRef.value.openDialog(row);
		};
		// 解绑当前行
		const onTabelRowFree = (row: any) => {
			ElMessageBox.confirm('确定解绑该条【' + row.userName + '】第三方账号信息吗？', '提示', {
				confirmButtonText: '解绑',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				freeSocialUser({id: row.id}).then((res: any) => {
					if(res.code === 0){
						ElMessage.success('解绑成功');
						loadTableData({});
					}
				});
			}).catch(() => {});
		};
		
		const onShowQRCode = () => {
			bindSocialUserRef.value.openDialog();
		}
		
		// 页面加载时
		onMounted(() => {
			loadTableData({});
		});
		
		return {
			tableSocialUserRef,
			bindSocialUserRef,
			onTableSearch,
			onTableSelectionChange,
			onResetSearch,
			onPageSizeChange,
			onPageCurrentChange,
			onOpenAddSocialUser,
			onOpenEditSocialUser,
			onTabelRowFree,
			onShowQRCode,
			...toRefs(state),
		};
	},
};
</script>